
import React, { Component } from 'react';
import { 
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableOpacity,
    Dimensions,
    ScrollView,
} from 'react-native';

const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
const rw = size=>size/1900*w;
const rh = size=>size/900*h;


export default class  PageOne extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data:[],
            data1:[]
        };
    }
    componentDidMount(){
        fetch('https://api.yidan.work:2004/post',{
            method: "GET",
            mode: "cors",
            headers: {
                'Accept': 'application/json,text/plain,*/*'
            }
        }).then(res => res.json())
        .then(res => {
            this.setState({
                data:res,
            })
            console.log(res)
            }).catch(function (e) {
                console.log("fetch fail");
        });
    }
    // del(e){
    //     fetch('https://api.yidan.work:2004/post/:post_id',{
    //         method:'DELETE',
    //         mode:'cors',
    //         header:{'Accept': 'application/json,text/plain,*/*'}
    //     })
    //     .then(res=>res.json())
    //     .then(res => {
    //         console.log(res)
    //     })
    //     .catch(function(e){
    //         console.log('fetch fail');
    //     })
    // }
    render(){
        return(
            <View style={styles.container}>
                <ScrollView style={styles.ul}>
                    <View style={styles.table}>
                        <View style={styles.th}>
                            <Text>帖子id</Text>
                        </View>
                        <View style={styles.th}>
                            <Text>帖子内容</Text>
                        </View>
                        <View style={styles.th}>
                            <Text>发帖用户</Text>
                        </View>
                        <View style={styles.th}>
                            <Text>发帖时间</Text>
                        </View>
                        <View style={styles.th}>
                            <Text>结束时间</Text>
                        </View>
                        <View style={styles.th}>
                            <Text>需要人数</Text>
                        </View>
                        <View style={styles.th}>
                            <Text>加入人数</Text>
                        </View>
                        {/* <View style={styles.th}>
                            <Text>操作</Text>
                        </View> */}
                    </View>
                    {this.state.data.map((data,index)=>{
                        return <View style={styles.list} key={index}>
                            <View style={styles.th}>
                                <Text>{data.post_id}</Text>
                            </View>
                            <View style={styles.th}>
                                <Text>{data.post_content}</Text>
                            </View>
                            <View style={styles.th}>
                                <Text>{data.user_name}</Text>
                            </View>
                            <View style={styles.th}>
                                <Text>{data.post_time}</Text>
                            </View>
                            <View style={styles.th}>
                                <Text>{data.post_deadline}</Text>
                            </View>
                            <View style={styles.th}>
                                <Text>{data.post_require_num}</Text>
                            </View>
                            <View style={styles.th}>
                                <Text>{data.post_now_num}</Text>
                            </View>
                            {/* <View style={styles.th}>
                                <TouchableOpacity onPress={{}}>
                                    <Text>DELETE</Text>
                                </TouchableOpacity>
                            </View> */}
                        </View>
                    })}
                </ScrollView>
            </View>
        );
    }
    
}

const styles=StyleSheet.create({
    container:{
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
    },
    ul:{
        width:rw(1402),
        height:rh(750),
        backgroundColor:"#ababab",
        marginTop:rh(20),
        borderColor:'#ebcaac',
        flexWrap:"wrap",
        borderWidth:0.5,
    },
    table:{
        width:rw(1400),
        height:rh(50),
        flexDirection:'row',
        alignItems:'center',
        backgroundColor:"#FFF",
        borderColor:'#ababab',
        borderWidth:1,
        backgroundColor:'#F6E2C7'
    },
    list:{
        width:rw(1400),
        height:rh(80),
        flexDirection:'row',
        alignItems:'center',
        backgroundColor:"#FFF",
        marginTop:rh(1),
        borderColor:'#ababab',
        borderWidth:2,
        backgroundColor:'#F8F1E6'
    },
    th:{
        width:rw(200),
        textAlign:'center',
        color:'#ebcaac'
    },
})